<style>

.tree {
    padding-left: 9px;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;

}

.tree:before {
    display: inline-block;
    content: "";
    position: absolute;
    top: -20px;
    bottom: 0;
    left: 0;
    border: 1px dotted #67b2dd;
    border-width: 0 0 0 1px;
    z-index: 1
}

.tree .tree-folder {
    width: auto;
    min-height: 20px;
    cursor: pointer;
    -moz-box-sizing: initial;
    -webkit-box-sizing: initial;
    box-sizing: initial;
}

.tree .tree-folder .tree-folder-header {
    position: relative;
    min-height: 20px;
    line-height: 20px;
    -moz-box-sizing: initial;
    -webkit-box-sizing: initial;
    box-sizing: initial;
}

.tree .tree-folder .tree-folder-header:hover {
    background-color: #f0f7fc
}

.tree .tree-folder .tree-folder-header .tree-folder-name, .tree .tree-item .tree-item-name {
    display: inline;
    z-index: 2
}

.tree .tree-folder .tree-folder-header > [class*="fa-"]:first-child, .tree .tree-item > [class*="fa-"]:first-child {
    display: inline-block;
    position: relative;
    z-index: 2;
    top: -1px
}

.tree .tree-folder .tree-folder-header .tree-folder-name {
    margin-left: 2px
}

.tree .tree-folder .tree-folder-header > [class*="fa-"]:first-child {
    margin: -2px 0 0 -2px
}

.tree .tree-folder:last-child:after {
    display: inline-block;
    content: "";
    position: absolute;
    z-index: 1;
    top: 15px;
    bottom: 0;
    left: -15px;
    border-left: 1px solid #FFF
}

.tree .tree-folder .tree-folder-content {
    margin-left: 23px;
    position: relative;
    -moz-box-sizing: initial;
    -webkit-box-sizing: initial;
    box-sizing: initial;
}

.tree .tree-folder .tree-folder-content:before {
    display: inline-block;
    content: "";
    position: absolute;
    z-index: 1;
    top: -14px;
    bottom: 16px;
    left: -14px;
    border: 1px dotted #67b2dd;
    border-width: 0 0 0 1px
}

.tree .tree-item {
    position: relative;
    height: 20px;
    line-height: 20px;
    cursor: pointer;
    -moz-box-sizing: initial;
    -webkit-box-sizing: initial;
    box-sizing: initial;
}

.tree .tree-item:hover {
    background-color: #f0f7fc
}

.tree .tree-item .tree-item-name {
    margin-left: 3px
}

.tree .tree-item .tree-item-name > [class*="fa-"]:first-child {
    margin-right: 3px
}

.tree .tree-item > [class*="fa-"]:first-child {
    margin-top: -1px
}

.tree .tree-folder, .tree .tree-item {
    position: relative
}

.tree .tree-folder:before, .tree .tree-item:before {
    display: inline-block;
    content: "";
    position: absolute;
    top: 14px;
    left: -13px;
    width: 18px;
    height: 0;
    border-top: 1px dotted #67b2dd;
    z-index: 1
}

.tree .tree-selected {
    background-color: rgba(98, 168, 209, 0.1);
    color: #6398b0
}

.tree .tree-selected:hover {
    background-color: rgba(98, 168, 209, 0.1)
}

.tree .tree-item, .tree .tree-folder {
    border: 1px solid #FFF
}

.tree .tree-folder .tree-folder-header {
    border-radius: 0
}

.tree .tree-item, .tree .tree-folder .tree-folder-header {
    margin: 0;
    padding: 5px;
    color: #4d6878
}

.tree .tree-item > [class*="fa-"]:first-child {
    color: #f9e8ce;
    width: 13px;
    height: 13px;
    line-height: 13px;
    font-size: 11px;
    text-align: center;
    border-radius: 3px;
    background-color: #fafafa;
    border: 1px solid #CCC;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)
}

.tree .tree-selected > [class*="fa-"]:first-child {

}

.tree .fa-plus[class*="fa-"]:first-child, .tree .fa-minus[class*="fa-"]:first-child {
    border: 1px solid #DDD;
    vertical-align: middle;
    height: 11px;
    width: 11px;
    text-align: center;
    border: 1px solid #8baebf;
    line-height: 10px;
    background-color: #FFF;
    position: relative;
    z-index: 1
}

.tree .fa-plus[class*="fa-"]:first-child:before {
    display: block;
    content: "+";
    font-family: "Open Sans";
    font-size: 16px;
    position: relative;
    z-index: 1
}

.tree .fa-minus[class*="fa-"]:first-child:before {
    content: "";
    display: block;
    width: 7px;
    height: 0;
    border-top: 1px solid #4d6878;
    position: absolute;
    top: 5px;
    left: 2px
}

.tree .tree-unselectable .tree-item > [class*="fa-"]:first-child {
    color: #5084a0;
    width: 13px;
    height: 13px;
    line-height: 13px;
    font-size: 10px;
    text-align: center;
    border-radius: 0;
    background-color: transparent;
    border: 0;
    box-shadow: none
}

.tree [class*="fa-"][class*="-down"] {
    transform: rotate(-45deg)
}

.tree .fa-spin {
    height: auto
}

.tree .tree-loading {
    margin-left: 36px
}

.tree img {
    display: inline;
    veritcal-align: middle
}

.tree .tree-tag{
    padding-left: 5px;
    font-size: 14px;
    color: #ccc;
}

.tree .tree-tag:hover{
    color: #f57a16;
}

.tree .tree-input{
    display: none;
    height: 25px;
    vertical-align: middle;
}

.tree .tree-input input{
    border: 1px solid #eee;
    height: 25px;
    font-size: 12px;
    padding-left: 5px;
    outline: none;
    color: #666;
}

.tree-context{
    display: none;
    position: absolute;
    top: 100px;
    left: 300px;
    width: 182px;
    z-index: 99999999;
    background: #ffffff;
    -moz-box-shadow: 2px 2px 8px 1px #aaa;
    -webkit-box-shadow: 2px 2px 8px 1px #aaa;
    box-shadow: 2px 2px 8px 1px #aaa;
    cursor: pointer;
    font-family: "Segoe UI";
    font-size: 14px;
}

.tree-context ul, .tree-context li{
    list-style: none;
}

.tree-context li{
    height: 24px;
    padding-left: 20px;
    margin-top: 2px;
    line-height: 20px;
}

.tree-context li:hover{
    background: #f57a16;
    color: #fff;
}

.tree-context li:first-child{
    padding-top: 5px;
    border-bottom: 1px solid #eee;
    height: 30px;
}

.tree-context li:last-child{
    padding-top: 5px;
    border-top: 1px solid #eee;
    height: 30px;
}


</style>
<div class="col-management">
    <div class="col-management-header">
        <h3>Survey attributes</h3>
    </div>
    <div class="col-management-body">
        <div>
            <div id="tree">
                <div class="tree tree-unselectable">

                    <!--<div class="tree-folder">
                        <div class="tree-folder-header tree-selected" data="1">
                            <i class="fa fa-folder-open"></i>
                            <div class="tree-folder-name">
                                <span class="tree-text">Pictures</span>
                                <span class="tree-input"><input type="text" value="Pictures"></span>
                            </div>
                            <span class="tree-tag"><i class="fa fa-yelp"></i></span>
                        </div>
                        <div class="tree-folder-content">
                            <div class="tree-folder">
                                <div class="tree-folder-header"><i class="fa fa-folder-open"></i>
                                    <div class="tree-folder-name">Wallpapers</div>
                                </div>
                                <div class="tree-folder-content">
                                    <div class="tree-item">
                                        <div class="tree-item-name"><i class="fa fa-tag"></i> wallpaper2.jpg</div>
                                    </div>
                                    <div class="tree-item">
                                        <div class="tree-item-name"><i class="fa fa-tag"></i> wallpaper2.jpg</div>
                                    </div>
                                </div>
                                <div class="tree-loader">
                                    <div class="tree-loading"><i class="fa fa-refresh icon-spin blue"></i></div>
                                </div>
                            </div>
                        </div>
                        <div class="tree-loader">
                            <div class="tree-loading"><i class="fa fa-refresh icon-spin blue"></i></div>
                        </div>
                    </div>

                    <div class="tree-item">
                        <div class="tree-item-name"><i class="fa fa-book blue"></i> Manual.html</div>
                    </div>-->
                </div>


                <div class="tree-context">
                    <ul>
                        <li class="create-node">Create</li>
                        <li class="rename-node">Rename</li>
                        <li class="delete-node">Delete</li>
                        <li class="remove-tag-node">Remove tag</li>
                    </ul>
                </div>
            </div>
        </div>
</div>

<script>
    $(function(){
        var body = $('body');
        var tree = $('.tree');

        $.ajax({
            type:"POST",
            url: Root_url+"management/getAttributeTree",
            dataType: "json",
            data:{'aid': 0},
            success:(function(data){
                if(data.status == "ok"){
                    tree.html("");
                    for(var i = 0; i < data.data.length; i++){
                        var html = '';
                        if(data.data[i].attr_type == "folder"){
                            html += '<div class="tree-folder" id="tree-'+data.data[i].atid+'">';
                                html += '<div class="tree-folder-header" data="'+data.data[i].atid+'">';
                                    html += '<i class="fa fa-folder-open"></i>';
                                    html += '<div class="tree-folder-name">';
                                        html += '<span class="tree-text">'+data.data[i].attr_name+'</span>';
                                        html += '<span class="tree-input"><input type="text" value="Pictures"></span>';
                                    html += '</div>';
                                html += '</div>';
                                html += '<div id="tree-content-'+data.data[i].atid+'" class="tree-folder-content">';
                                html += '</div>';
                            html += '</div>';
                            tree.append(html);
                        }else{

                        }
                    }
                }
            })
        });

        body.on('click', '.tree-folder-header', function(){
            tree.find('.tree-folder-header').each(function(){
                $(this).removeClass('tree-selected');
            });
            tree.find('.tree-item').each(function(){
                $(this).removeClass('tree-selected');
            });
            $(this).addClass('tree-selected');

            var size = $(this).parent().find('.tree-folder-content').find('.tree-folder').size();
            if($(this).parent().find('.tree-folder-content').css('display') == 'none' || size == 0){
                $(this).parent().find('.tree-folder-content').show();
                var atid = $(this).attr("data");
                $.ajax({
                    type:"POST",
                    url: Root_url+"management/getAttributeTree",
                    dataType: "json",
                    data:{'aid': atid},
                    success:(function(data){
                        if(data.status == "ok"){
                            var tree_folder = $('#tree-'+atid);
                            tree_folder.find('#tree-content-'+atid).html("");
                            for(var i = 0; i < data.data.length; i++){
                                var html = '';
                                if(data.data[i].attr_type == "folder"){
                                    html += '<div class="tree-folder" id="tree-'+data.data[i].atid+'">';
                                        html += '<div class="tree-folder-header" data="'+data.data[i].atid+'">';
                                            html += '<i class="fa fa-folder-open"></i>';
                                            html += '<div class="tree-folder-name">';
                                                html += '<span class="tree-text">'+data.data[i].attr_name+'</span>';
                                                html += '<span class="tree-input"><input type="text" value="Pictures"></span>';
                                            html += '</div>';
                                        html += '</div>';
                                        html += '<div id="tree-content-'+data.data[i].atid+'" class="tree-folder-content">';
                                        html += '</div>';
                                    html += '</div>';
                                    tree_folder.find('#tree-content-'+atid).append(html);
                                }else{

                                }
                            }
                        }
                    })
                });
            }else{
                $(this).parent().find('.tree-folder-content').hide();
            }

        });

        body.on('click', '.tree-item', function(){
            tree.find('.tree-item').each(function(){
                $(this).removeClass('tree-selected');
            });
            tree.find('.tree-folder-header').each(function(){
                $(this).removeClass('tree-selected');
            });
            $(this).addClass('tree-selected');
        });

        var context = $('.tree-context');
        tree.bind('contextmenu', function(e) {
            e.preventDefault();
            var $clicked = $(e.target);

            //selected node
            tree.find('.tree-item').each(function(){
                $(this).removeClass('tree-selected');
            });
            tree.find('.tree-folder-header').each(function(){
                $(this).removeClass('tree-selected');
            });
            $clicked.closest('.tree-folder-header').addClass('tree-selected');
            $clicked.closest('.tree-item').addClass('tree-selected');

            if($clicked.hasClass('tree-folder-name') || $clicked.hasClass('tree-folder-header')
                || $clicked.hasClass('tree-item-name') || $clicked.hasClass('tree-item') || $clicked.hasClass('tree-text') ){
                xOffset = 300;
                yOffset = 300;

                context.show().css("top",(e.pageY - xOffset) + "px").css("left",(e.pageX - yOffset) + "px");

                //set value into context menu
                var id = $clicked.closest('.tree-folder-header').attr('data');
                context.attr('data', id);

            }else{
                context.hide();
            }
        });

        body.on('click', '.create-node', function(){
            var id = $(this).parent().parent().attr('data');
            var html = '';
            html += '<div class="tree-folder created">';
                html += '<div class="tree-folder-header">';
                    html += '<i class="fa fa-folder-open"></i>';
                    html += '<div class="tree-folder-name">';
                        html += '<div class="tree-folder-name">';
                        html += '<span class="tree-text" style="display: none">New folder</span>';
                        html += '<span class="tree-input" style="display: inline-block"><input type="text" value="New folder"></span>';
                    html += '</div>';
                html += '</div>';
                html += '<div class="tree-folder-content">';
                html += '</div>';
            html += '</div>';
            $('#tree-'+id).find('#tree-content-'+id).append(html);
            //Insert into database
            $.ajax({
                type:"POST",
                url: Root_url+"management/addAttribute",
                dataType: "json",
                data:{'aid': id},
                success:(function(data){
                    if(data.status == "ok"){
                        var atid = data.atid;
                        var tree_created = $('#tree-'+id);
                        tree_created.find('#tree-content-'+id).find('.created').attr('id', 'tree-'+atid);
                        tree_created.find('#tree-content-'+id).find('.created').find('.tree-folder-header').attr('data', atid);
                        tree_created.find('#tree-content-'+id).find('.created').find('.tree-folder-content').attr('id', 'tree-content-'+atid)
                    }
                })
            });


        });

        body.on('change', '.tree-input input', function(){
            var id = $(this).parent().parent().parent().attr('data');
            var value = $(this).val();
            $.ajax({
                type:"POST",
                url: Root_url+"management/updateAttribute",
                dataType: "json",
                data:{'aid': id, 'name': value},
                success:(function(data){
                    if(data.status == "ok"){
                        $(this).parent().find('.tree-text').text(value);
                        $(this).parent().hide();
                        $(this).parent().parent().find('.tree-text').show();

                    }
                })
            });


        });

        body.on('click', '.rename-node', function(){
            var tree_name = tree.find('.tree-selected').find('.tree-folder-name');
            tree_name.find('.tree-text').hide();
            tree_name.find('.tree-input').show();
        });

        body.on('click', '.delete-node', function(){
            var id = $(this).parent().parent().attr('data');
            $.ajax({
                type:"POST",
                url: Root_url+"management/deleteAttribute",
                dataType: "json",
                data:{'aid': id},
                success:(function(data){
                    if(data.status == "ok"){
                        $('#tree-'+id).remove();
                    }
                })
            });
        });

        body.on('mouseup', '.tree-input', function(){
           $(this).select();
        });

        body.bind('click', function(e){
            var $clicked = $(e.target);
            context.hide();
            /*tree.find('.tree-selected').find('.tree-folder-name').find('.tree-text').show();
            tree.find('.tree-selected').find('.tree-folder-name').find('.tree-input').hide();*/
            //Check input text update or new create

            /*if(tree.find('.tree-selected').find('.tree-folder-name').find('.tree-input').css('display') != 'none'){
                tree.find('.tree-selected').find('.tree-folder-name').find('.tree-input').hide();
                tree.find('.tree-selected').find('.tree-folder-name').find('.tree-text').show();
            }*/
            if($clicked.hasClass('tree-input')){
                tree.find('.tree-selected').find('.tree-folder-name').find('.tree-input').hide();
                tree.find('.tree-selected').find('.tree-folder-name').find('.tree-text').show();
            }

        });

    });

</script>